<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户登录界面</title>
		<style>
			html{
				height: 100%;
			}
			body{
				display: flex;
				margin: 0px;
				padding: 0px;
				height: 100%;
				background-color: #FFFFFF;
				flex-direction: row;
				/* 设置水平方向 */
				justify-content: center;
				align-items: center;
				
			}
			.container{
				display: flex;
				width: 800px;
				height: 500px;
				border-radius: 5px;
				background-color: #B3D7FF;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				box-shadow: 0px 0px 10px 5px #343A40;
			}
			.title{
				font-size: 50px;
				font-family: "eras light itc";
				font-weight: bold;
				color: #FF0000;
				letter-spacing: 15px;
				text-shadow: 5px 3px 3px #117A8B;
				margin: 40px 0;
				margin-top: 0px;
			}
			.login-input{
				position: relative;
				width: 300px;
				height: 50px;
				border: 0px solid red;
				color: #343A40;
				margin: 5px 0;
			}
			.login-input>label{
				box-sizing: border-box;
				position: absolute;
				border: 0px solid red;
				width: 65px;
				height: 50px;
				line-height: 50px;
				letter-spacing: 2px;
				padding-left: 10px;
				color: #666666;
			}
			.login-input>input{
				box-sizing: border-box;
				border-radius: 5px;
				border: 1px solid #17A2B8;
				padding-left: 60px;
				outline: none;
				font-size: 18px;
				width: 100%;
				height: 100%;
			}
			.login-button{
				position: relative;
				width: 300px;
				height: 50px;
				margin: 15px 0;
			}
			.login-button>button{
				border: 0;
				width: 100%;
				height: 100%;
				border-radius: 5px;
				border: 1px solid #DDDDDD;
				outline: none;
				background-color: white;
				letter-spacing: 15px;
				padding-left: 15px;
				color: #666666;
				font-size: 18px;
			}
			.login-button>button:hover{
				cursor: pointer;
				background-color: #F6F6F6;
				font-size: 20px;
			}
			.login-button>button:active{
				font-weight: bold;
				outline: none;
				border: 0;
				box-shadow: 0px 0px 8px 1px #7088FF;
			}
		</style>
	</head>
	<body>
		<div class="container" id="login-container">
			<div class="title">
				美印在线生产信息系统
			</div>
			<div class="login-input">
				<label>账户：</label>
				<input type="text" v-model="user.u_id" />
			</div>
			<div class="login-input">
				<label>密码：</label>
				<input type="password" v-model="user.u_pwd" />
			</div>
			<div class="login-button">
				<button @click.prevent="login">登录</button>
			</div>
		</div>
		<script type="text/javascript" src="../../js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="../../js/vue.min.js"></script>
		<script type="text/javascript" src="../../js/axios.min.js"></script>
		<script type="text/javascript" src="../../layer-v3.1.1/layer/layer.js"></script>
		<script type="text/javascript" src="../../js/my.js"></script>
		<script type="text/javascript">
			Vue.config.devtools = true;
			
			//使用vue
			let vue=new Vue({
				el:"#login-container",
				data:{
					user:{}
				},
				methods:{
					// 登录方法
					login(){
						this.$myPost('../safty/login/userLogin',this.user)	
						.then((result)=>{
							if(result){
								layer.msg(result.message,{
									icon:1,
									time:1500
								})
								setTimeout(()=>{
									location.href="../home/index1.html";
								},1500)
							}
							
						})
					}
					// login:function () {
					// 	
					// 	console.log(this.user)
					// 	var index = layer.load();
					// 	$axios.post('../safty/login/userLogin',this.user)
					// 	.then((response)=>{
					// 		
					// 		let result=response.data;
					// 	    console.log(result);
					// 		layer.close(index);
							// if(result){
							// 	layer.msg(result.message,{
							// 		icon:1,
							// 		time:1500
							// 	})
							// 	setTimeout(()=>{
							// 		location.href="../home/index1.html";
							// 	},1500)
							// }
							// else{
							// 	layer.msg(result.message,{
							// 		icon:1,
							// 		time:1500
							// 	})
							// 	
							// }
							
					// 		
					// 	})
					// 	.catch((error)=>{
					// 		let result=error.data;
					// 		console.log(result);
					// 		layer.msg(result.message,{
					// 			icon:2,
					// 			
					// 		})
					// 	})
					// }
				},
				mounted(){
					
				}
				
			});
		</script>
	</body>
</html>
